<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3735306" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe891;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe891;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec7f;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xec7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec8c;</span>
                <div class="name">点赞_块</div>
                <div class="code-name">&amp;#xec8c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">钱袋</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">金币,硬币,货币,Coin</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">弹幕开启</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">弹幕关闭</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b6;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe8b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">账号</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">前进</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">后退</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">咨询</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d5;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b1;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xe8b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">3.1我的</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">赛事</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">咨询</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c1;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xe8c1;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1668072135259'); /* IE9 */
  src: url('iconfont.eot?t=1668072135259#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABSkAAsAAAAAJSgAABRUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACGVgq3JK1WATYCJANsCzgABCAFhGcHgjMbXx+zEVVTNuW5yf6LBA6vmD9FEYm9ZWuQlpJIFLNl2Q323t/588rP92bHHfXRoZTQ08/9u+dCko8IDttatG8qFAAbVQUoq1tJqPLRVmd4fps9QkCkSvJDn0Q7i0loU3ZhNLJo1rLouGvX5SJdlS5Pr1Lp+Tpx797NZBILY0XqXrKi/WG5Mtg67HoymarMTk0kUlHPB64/uCckqxKpiUQsdJNaQmXvMukwdxoS8EP+scPmfy61lyKqvqlChhkL0yk3I//P7+3dz/8HP9dBSpxeKVe6DJBU3xSRmkvaDtJRbng3JLW5WXQs7aybm3B+qlOM4+MBk5gWoWraMTb/PViFexiNRc1hxY+8HwSk02s0+GKKMxcQUlWBNsCGxNxXEPZVqrG+CmCOflxBtog8AetlHbovDMyN3QvuuZ9f+/oXBgzeYoaz/k2uBadjDm4jgnMesL/YSN1SaHgDeMACnZqVmuziekVYH3e6JD1L7/gFNIPQswziM3APvAP0AdYAb0Ay8MVAVpwXT96+v/Pg/d33D9+/OTh3sGAkQQxLPLW4YoY7q2oGRDPNK95Q3BQf/R95gCIMYYhcFCxkWDIIyCGiTDglCIQUgFMITyblEDhQAPTOBNAqbisHYoiAIiCWgGIgNgI8xFaiiDpg5AJNA0Y+0DxglAItAAmaFgIjHWgRMDKAlgIjAFoFjBygjcCIgLYCowxoG0hURzeAUQL0MDCygZ4GASFsfxZQAOw8EGBg55mAQmDnuYAs2HktIBN23gsoBw7OKVgWWQk4lzepQJcZBjgFpJ0EIOMrM+0TWuGxGFyeQTABlZDIJnbRdReGEJdJfNjV42YZdPyIrj6Nnc4d5dt4dBSqKA8bXl8dScNiXWV5JJ0YmRty4UIFYXnN9OoaRLUZ9GZcWlSnk/Lw4gDVn8UvpCENG415JASzkM6gMxkKPLyoiM+deguWXIiVFnJZpR31b0S7C23/zmhRJYTSllSa+u8oqqx0Mk5Nbai5+U2WZZpBS94NtfBDzjCs8FNOlerXE/ObRs32puuGn7P5M9iNvkTF7DnoSp5gbEiuWWORTk3EnPR8F5dw+c0JtJdCHtIAQeYRH0fCsAtTSJNk8v3R1wEg0ffJSK5SQF6oMP81cFttw82n57tQjAtk3825zcJDxV0+pSmEdJrr3wBEFz4u4v620gx345Pt3bIcP9P7VXm7SqmxueZOuXN4c+Ant2qu2y7bodZTFIF9qA+A9EFQo7nt6nCZh0d6LjmMjepc9Yuc/yeOBzVFkcSSrAEtafd8+Kpv2HdL+1l3eNWqmpO5LGKCSIyBG1NlR8r2WggxdzMUoYGWdKkTF4ehlne1MOMwZdioEm6l8xIQ0j4NLxPzI1scRc819xkxyEEbFc6jZpJZTI8+7ym/9/6HI47Fxv7EtC6lBqFLU3rwRScU7vKImV8T8xA34gWF76x0i9W/7vVn1JDBIE0xnyFnVPXWG/ExChtVBcgLfssycv3xhFM8Oklo+WNmL6bCykl1fcfYmj7WgyvF7CfshrsSOXzE9Y2/7yqF9BUu4y/A5bK4HgeVMgH24e7IHtGn5u/Mjo/vOz+s+t6rbyb38mEaT/kS9x+2Z21tY0Y6+DPysM+jvezS1tR6lMY5/05k1wcINrpkX7KHe/kyq79EW4JxAyQCl95lBu+vgwJy40PeCu/d3cPKEcpDOD8hsojZgjHXYv6X/hNWdnHJdxbBHNiFujhifQ5BzEMIKUKuVjvCaft8V1bByBnrdLRVzZpeyFEEABOhToE0M+jDONpAijHXXJioY1kyXCUDJFTbgE5U1vm4lEKpy4q6i52iqVbjvDs0VQJ5mIuZYd5oIuFoEEN1t67iKdgFAAGIARFoWyGLIlBA4nh21mKepvpqkmQLuf25CojLdNOpmH29m/V3v/cNF/Evd0BBc8SaUNAoaiG0kxE8nvkoRQAvW1UvMl/70yTZs534SO2s+p5pQ7sQC2iIS7hPNhC5K1k1cJithNzngW0iFbKRXSVisXtz9sEeC6AVDncI0jTlcQwArm4WJ+pEGRdtZWLrz9UL3oCD3HC8Yzz+E5Pod8SSvwlN/6WLGGAjoPbw0HmFBZlk8TJdVLK1lo7QX2JIzz5tHjpo2Rv3H9h08NyvRSlc7N0AMd6siTzsV7bU+HfGG8wkOagxIZuXiV3IPt8GmN4KtTN9cgMUkOuPEeDf7n1o+d2vekFeAbnzxUlLOwrzCtnTm6W3ngm0HAdFcLfkQkB0GCIbWS6dMEPqyHSYIKqB2ON5p3mCy/izW0Lqzac7iDf3paDTYQq81x40Ha9YXI8HtVxIHR0atstVLaPRhehwnFrtX0qTjQ496XKfKL8jEm+Qg2CSSRKaGpIoz6nYOdxLdZ7L97zgZLPFMDLt1Q3P/e4GV/o6ncdAnciF1jN9u+p2DmZCUZJ2Mo6D2HVA/qz59Q/Sm1eSZGOIE7eNqGpsdGAr3knNt62d/H2+FO/KAZHjdkSYplb78AeYr8qP/JXuZp/l7GjFhjsHCK0vqBfRcCpmshmhTQjt0G4wPdrKHo8KniL2XfWQueo5L2Y84bPCtG/4HU1vKIoXjQqSSk1/x01I32GeW7AoxPwNINevmO+mAvqOUId5um6G7OPSq6NBE81mAikdJqOI1cAms6+v/rz8MwKh+AD0DVfIQVMMWTL359iX8GOSJKT8vo7iEj7q4cBDJXXRWcS2grqcv2SLV6dKvOc7rLi9Y5vgwhTzArLgzYovfFW66B20diao4FM+hLsNKdocm/3raKt1Ncu04d5lVRCXqmHItUI1nczE8fP4Ghukoq9z1TWmo22yi6dlfwyI365Z49OPdnx4kqJXBghNL64ETmXqLcOdqA3CXjS4ZHU+mAUHuD/CBDMarY1gKIZ045WOsnkxu8Hi1hxkQUDDQXjfX5Dn0047KnrjW5L51dDnnEXJ+P0//zxjRm+my0l+/DQfdtAyP2rf3LENGen5eWWlO7btQ0TOe5zzFhkqKtyz48/fx21aUZuTtNdBOorfd/0YcfnyhaHBEDB7g1wLm8dJ4uwjBjy2hXulNXBccrxa2Kiu6UD6VxE7MLzw3vB9yIqH2REx8gGgdEu6KYBse45HRPCfADQho+iAeZk8nGI3yhXJNjnyB7/XFC8V2Q47xnJ93NnkLS2ULspJnxW9/+zyIcJsBMI13wUjD29Nm6W2EsCiSHe8stAQHyc582c+LYaTUx5FNlEmgcQNQvMsEZZ+BP2StggYxW6SyVP/RK58sy4uXiq1/W3AYkkqHwuAtrPgwpq1R0OjluUezb1Ir76XfVvWrv1qTHzMplOF6cWN9wb4OL7ZvGrZpicB8jLzcv/r59i+3+aa5qyacPNr0cvevjHpUhexdtPv11Bc5Jgk2zJZnZ9mKJ4yHVci8hrtH1ftfQW/PT5uf95a09g9yDHJP84bEiFTwq+Tj2FTJDvrKuzqm6UR/jn/EktLw17G0rl2uB3cOk7pJTioYHB8b27tjQbmXMJsAGpyNFkqrVPvKWXHS3SwdGIqTPifMHV/TZhOEs8u1Xu0zixVjga94ui5WH79R6iIN+UrT544GTkkasvnWKxDg6lmkYew0K20f2FLlWbIvhQwOPtX2jdgA5orzTvRLkqWbCMg4LpLzgY59RhrdvP/NsEquv5/DDFWRZTXIbYLJwxPKIAnvV5RhsesnH5FG5smMLlGZ5cW5NmL3ofQsHKqO3/+gZ+kyjfqaIX1JTq9nL1yxuUyo/gmt6UsU089ZM07QNK+VY2SW4eiJvhWoshkBNQJOwZHxv6Wvj4ziD4dvC8hCo12I3ov5v6yQMfaY4XEtqL/jvDW8NqMqeNfTglOQSYj297VzfHWZCvsHGNApj74Te9u5r974lpnvTEHcSkb7i5NiXBiPVfchRXZhXTz7Zllcbs/R/Zcg786wf1VmF1qjSx3opPxS89PxjkAhAg2lMtLZAsXykrk5bcEDM6RS2Tl8lsZxqiZ96e1JDZZLE2JLcME9DVZ7vUPn40h9r6Ob2GXREDcAz97gr83G8DItEZlKQsWxNwBEGHDdzJCG6KCLYmNFksjMDgnNzauH1BdaHuxR7HBRaj21i/CI/9ScDW3kzOaQiGvkEPkgvnbE2YhC4ypS+YjlFOsBfAoW6GoKTX8zKXxtFW0EYqV5ws3K6mhcREmOBzJxcCFxLx1jAzm6rV0O41BN0SHJWH4ZByTQqTD8qiBuaQvUFQ6nynIGnUr+Pt3M7ILMipXpDBfPDMXhPtS0KYCIvZoeEo7xb3PZu4sihTbpDal5rUZZnxNVNrzzXYpZi7Gk7dP59VovHpIV1N6Nbrm7JxubrevWYtWrUcP6TOM7begN27BOAy5i5yeOubP60SNE7jfQBCQA/4foI5kfdPo0pr6oaImEiH+po3mGdA+iY3b7YPB5PsPQA0l/zdmAf6FjJ7NAhOixsXTGe9y6lBCcHWaEi9ii/CnbU2emTHECJKI7+NFHAr+PtRfAQWhin7oxWYCmUMh7CNQOGTCFQHeqqgsHmTXRfx7pxwGRYZCAqiZTEt8nS9hooAtLZkR0Npv0Cz0uwd6AHl+9x2/hWZaM5VR6elR+QmyVjntlPVd+AFRrIxB12gQJCNNDk4Sx5GhgUkOTkbY1ZPkt9v93QD2dvt2qOc6M6HMsKO6LI07Q+3UfuPSIgKNW5uFqsCRysV45ArLxve0T0wTOsW7M8Xh65h4W7FsyFS8GP0vyAjYOBzHzFC7A2i3I48dOjXtHW+cAXbW7eaLrE6PPElmt8sc8i0Ctiuzy5M8TpGVv7tI2D1DmictrKHWy+tXqKnQmJ9vLDTd2DUFBkP+ba+RWi+bQK6WFUnzQjNukGJHVVSM8gsYd/qOGEfM4wCm7Rmfedzb/Cii7U/CZwLaRvxEtIYRFDz1Gf4n/hnV6Qet5d7hfebd5sUZ7wzSnuUqCgmVqFKMUVk+uZLuCssQrz1qatSU1VMbEVuPFY9BjGjcr4uWjmOOVI777tCM7w/lvGFm/WfoXzgfD3JfcQ9+5MA4j0H7mJJM3UeFYemVy1EeixD9OdT3NZGCmdxDyvnc3UdCt/S3freuCOj9Z0KckDUxeU+PgK87/1fEcY81b2z8ko3xS8d2c7IwIbaI0z0uzi2ZI2Kzhd7kd3O6jbIyH5lxbfFIoWu6MUFdoLebvQXTqwsE1SEO5WIrz6q79itiR4MpMSNGmVyYrHskelTg+cCVMYkZJtKay5fXjJgf1uTOZc3NXfMDivWdgFmRlFTBFHwHYqzwMK9zyc+OLgwRhyMcMbS4ItYh8BQ2GQerpbrktgqr1CbdYJf+XiG3uRLNHegCTctuVDU6Yrh4MAIGQ6FKW1fnCnv/aoRs+09PGxUb4G8Z3ZBgqZ9k8RlP9h0+R70piF6yAIzmeb2tnKYX6MqtWzkB4ArokEl9SUllrBLmBF0bCrHKPFcJwLsC+gP44GP1RUf3sWQPJA4FT+Cofa3LQTvZmX+mOX4dI3DwFBLHA+QLoygsO31JMM+JFIl+LCNJ+0XMSVu2TGKK+qWkcpBQyet/fUc/M73ZXGwoKDQWm+4VmwuMxgJT8T1ziSMtMBSbmtJn6tX9r30s3xpG9NaPpWq3yulUuTVHXeoAx6baXWbXjT8BF8HE8CfjdfZS4FE7lXprGjcwvVqlTfwrl5hjFBdtID4mtxOGsyYSBgntpGuk9UXCavlp6hWCVuxVq12GORIMB2pnOBzGEy9izF/HmGFQu72qG+lF6EH0HO2PT+jf3EEPoRmhoxg2wOwmOgM9gsLkCDEnsB8LrdyuUfCjExY+srGzV7u++Y2KoCiC/uRHrbuC3IpyHsJXlxhKDcxj4JGnvSYea6YrSZWwp7KeqKmR9hB6pOqaBqJ3T4IqKYT9puTFUOaZZKxkLici/UzPrjMdDWeuCZjOCdZA7rfQIeitW+AK4slL1q5aOU0ASYcFCmSKWo/CmI/vbmrMxZMJzYxB+hH6IGMN0XGbzcrTeHIFGY8Hpgszp0VyP04D4BnUVQjBvYJGI6YKISwkUPsRlax6sxLqL69dCZX/Dp2Hfvct+6HA2tmL9p0oQvDkc8F9/n3qSsYw4zwBO5rBAOQ/XpR16+Ukm5PAtJl/SPr6JpmR/z/CiTHzvc5l0KxsImI0prFNwT8hCTaMuDYROH+APQ/wlwdUtNfVPYQmSO4XTBlbFbjRtqyiCtcGIf/0/hexoGxWD0CTHOxQmRC41rtiVGR/2NfyHzY7RX5v32cq+KFbufwHiARedjoBa+XT3fMfquGoeP5/cTQn4T8G/5G76e/DrlTXqS93qTLC/IVbbIbmvNIDEnN7bv3/qREqzh/MV5JAEQSrxLKKgCourPCUDNUA6a+t4P9P1fme6+cuYC75n5y7IOQNIRW8JaKec/HtvCeDfj4gYopPp0PylTMo0AGBXBrQbKbBi1x7eUM273hLrkuci+/jPcXe8QG5/ufTObLw9jJoXjUOf11VoK4Wqp4ANda0t/nkCbinm11XP6alyp/Wkl/n72oE/CnFo0t2pNa11fllWHSNrTcEAj7I529vhVL2t1bX0tIOdfjbm+pqApqGQKAjTqv1ZVloatpbgYNfnSoBe9xakGoTpm9Uo10b3/oD8a8vW516Y7So4mfk8hW/Liyi04foaegYuFTSxrRcTfRdxqpnEECKD0SwH7W3gqQcAXDLIdAO0pGtNqlTcyvXaBBQO8TRvtbnYyWa6t2tM4Mw7lZovlMVCy4rJ69AoSKlKV0ZylSWspWjXJFFEVU00cUQUyxFii2OuISdPEhdaDtI0VBsikh2uR+u1tWMYPuIK4XuWUFivLZy0FFKKrb+K+TcYKGJNY+ksBx4yu16SyNpWaO8xz1QCkacVnYsI0lKnlu0UbjfXcUiKh1KpqaE4XnRNDM7VsrPQSVi/YWZwXvJnzH+Ctw23tWMypHKbhHGEhd2ctnJAQAAAA==') format('woff2'),
       url('iconfont.woff?t=1668072135259') format('woff'),
       url('iconfont.ttf?t=1668072135259') format('truetype'),
       url('iconfont.svg?t=1668072135259#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan_kuai"></span>
            <div class="name">
              点赞_块
            </div>
            <div class="code-name">.icon-dianzan_kuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiandai"></span>
            <div class="name">
              钱袋
            </div>
            <div class="code-name">.icon-qiandai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinbi-yingbi-huobi-Coin"></span>
            <div class="name">
              金币,硬币,货币,Coin
            </div>
            <div class="code-name">.icon-jinbi-yingbi-huobi-Coin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwu"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon-liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmukaiqi"></span>
            <div class="name">
              弹幕开启
            </div>
            <div class="code-name">.icon-danmukaiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmuguanbi"></span>
            <div class="name">
              弹幕关闭
            </div>
            <div class="code-name">.icon-danmuguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanghao"></span>
            <div class="name">
              账号
            </div>
            <div class="code-name">.icon-zhanghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianjin"></span>
            <div class="name">
              前进
            </div>
            <div class="code-name">.icon-qianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              后退
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun1"></span>
            <div class="name">
              咨询
            </div>
            <div class="code-name">.icon-zixun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibo1"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.icon-zhibo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanzhu1"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.icon-guanzhu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31wode"></span>
            <div class="name">
              3.1我的
            </div>
            <div class="code-name">.icon-31wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanzhu"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.icon-guanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saishi"></span>
            <div class="name">
              赛事
            </div>
            <div class="code-name">.icon-saishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun"></span>
            <div class="name">
              咨询
            </div>
            <div class="code-name">.icon-zixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibo"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.icon-zhibo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan_kuai"></use>
                </svg>
                <div class="name">点赞_块</div>
                <div class="code-name">#icon-dianzan_kuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiandai"></use>
                </svg>
                <div class="name">钱袋</div>
                <div class="code-name">#icon-qiandai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinbi-yingbi-huobi-Coin"></use>
                </svg>
                <div class="name">金币,硬币,货币,Coin</div>
                <div class="code-name">#icon-jinbi-yingbi-huobi-Coin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwu"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon-liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmukaiqi"></use>
                </svg>
                <div class="name">弹幕开启</div>
                <div class="code-name">#icon-danmukaiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmuguanbi"></use>
                </svg>
                <div class="name">弹幕关闭</div>
                <div class="code-name">#icon-danmuguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghao"></use>
                </svg>
                <div class="name">账号</div>
                <div class="code-name">#icon-zhanghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
                <div class="name">前进</div>
                <div class="code-name">#icon-qianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">后退</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun1"></use>
                </svg>
                <div class="name">咨询</div>
                <div class="code-name">#icon-zixun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibo1"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#icon-zhibo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanzhu1"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#icon-guanzhu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31wode"></use>
                </svg>
                <div class="name">3.1我的</div>
                <div class="code-name">#icon-31wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanzhu"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#icon-guanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saishi"></use>
                </svg>
                <div class="name">赛事</div>
                <div class="code-name">#icon-saishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun"></use>
                </svg>
                <div class="name">咨询</div>
                <div class="code-name">#icon-zixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibo"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#icon-zhibo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
